<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WH2114 - 在线树洞聊天室</title>
    <style>
      #chatroom {
        width: 280px;
        height: 420px;
        border: 1px solid #666;
        border-radius: 10px;
        padding: 10px;
        box-sizing: border-box;
        overflow: auto;
        color: #999;
      }
      .text {
        color: darkmagenta;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>欢迎热烈聊天</h2>
      <div id="chatroom"></div>
      <div>
        <input type="text" id="word" placeholder="聊天内容" />
        <button id="sendbtn">点击发送</button>
      </div>
    </div>

    <script>
      // # 客户端socket
      // # 创建Socket服务
      // # 链接对应的服务器socket
      // # 转发消息给服务器socket
      // # 接受来自服务器socket的数据
      // # 监听 服务器socket 的 关闭和异常

      window.onload = function () {
        console.log("123123");
        // # 创建Socket服务   链接对应的服务器socket
        const client = new WebSocket("ws://localhost:4800");

        client.onopen = function () {
          // # 转发消息给服务器socket
          client.send("大家好,我是你们的一员.");
        };

        // # 转发消息给服务器socket
        function sendToServer() {
          client.send(word.value);
          word.value = "";
        }
        sendbtn.onclick = sendToServer; // 发送消息到服务器

        // 键盘事件
        document.onkeydown = function (e) {
          if (e.keyCode == 13) {
            sendToServer();
          }
        };

        // # 接受来自服务器socket的数据
        client.onmessage = function (msg) {
          console.log(msg);
          var chatroom = document.getElementById("chatroom");
          chatroom.innerHTML += `<p class="text"> ${msg.data} </p>`;
        };
        // # 监听 服务器socket 的 关闭和异常
        client.onclose = function () {
          alert("socket 服务端已经异常关闭了");
        };
        client.onerror = function (err) {
          console.log("socket 服务器端已经 异常了 " + err);
        };
      };
    </script>
  </body>
</html>
